import React from 'react';
import styles from './Index.module.css';
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import { useCallback } from "react";
import { loadFireworksPreset } from "tsparticles-preset-fireworks";
import { getLogin } from "../../axios/use";
import {
  Form,
  Input,
  Button,
  Toast,
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
type LoginFormValues = {
  username: string;
  password: string;
};
const Login = () => {
  const nav=useNavigate()
  const fireworkInit = useCallback(async (engine) => {
    await loadFireworksPreset(engine);
  }, []);
  const options = {
    preset: "fireworks",
  };
  const onFinish = async (values: LoginFormValues) => {
    const { username, password } = values;
    const res = await getLogin({ username, password });
    if (res.data.code === 10000) {
      Toast.show({
        icon: 'success',
        content: '登录成功',
      })
      nav('/home')
    } else {
      Toast.show({
        icon: 'fail',
        content: '登录失败',
      })
    }
  }
  return (
    <div className={styles.loginWrapper}>
      <Particles options={options} init={fireworkInit} />
      <div className={styles.loginCard}>
        <div className={styles.logo}></div>
        <h2 className={styles.title}>登录</h2>
        <Form
          name='form'
          onFinish={onFinish}
          layout='horizontal'
          footer={
            <Button block type='submit' color='primary' size='large'>
              提交
            </Button>
          }
        >
          <Form.Item
            name='username'
            label='姓名'
            rules={[{ required: true, message: '账号不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='password'
            label='密码'
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入密码' />
          </Form.Item>
        </Form>
        <div className={styles.tips}>没有账号？请联系管理员</div>
      </div>
    </div>
  );
};

export default Login;
